<template>
  <div class="gallery-container">
    <div class="message" v-if="!isGridSupported">
      Sorry, your browser does not support CSS Grid. 😅
    </div>
    <section class="section" v-else>
      <h1>Nom Nom Gallery</h1>
      <div class="grid">
        <div
            class="item"
            v-for="(item, index) in items"
            :key="index"
            :class="getItemClass(item)"
            @click="goToDetial(1)"
        >
          <div class="item__details">
            {{ item.text }}
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {useRouter} from "vue-router";

const items = ref([
  { text: "jelly-o brownie sweet" },
  { text: "Muffin jelly gingerbread", size: "item--large" },
  { text: "sesame snaps chocolate", size: "item--medium" },
  { text: "Oat cake", size: "item--large" },
  { text: "jujubes cheesecake", size: "item--full" },
  { text: "Dragée pudding brownie", size: "item--medium" },
  { text: "Oat cake", size: "item--large" },
  { text: "powder toffee" },
  { text: "pudding cheesecake", size: "item--medium" },
  { text: "toffee bear claw", size: "item--large" },
  { text: "cake cookie croissant" },
  { text: "liquorice sweet roll", size: "item--medium" },
  { text: "chocolate marzipan", size: "item--medium" },
  { text: "danish dessert lollipop", size: "item--large" },
  { text: "sugar plum dragée" },
]);

const isGridSupported = ref(false);
const router = useRouter()
onMounted(() => {
  // 检查浏览器是否支持CSS Grid
  const supportsGrid = CSS.supports("display", "grid");
  isGridSupported.value = supportsGrid;
});

const getItemClass = (item) => {
  let classes = "item";
  if (item.size) {
    classes += ` ${item.size}`;
  }
  return classes;
};
const goToDetial=(id)=>{
  router.push(`/detail/${id}`);
}
</script>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css?family=Arvo');

.gallery-container {
  body,
  html {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    background: #f5f4f4;
    font-size: 13px;
    font-family: 'Arvo', monospace;
  }

  .message {
    border: 1px solid #d2d0d0;
    padding: 2em;
    font-size: 1.7vw;
    box-shadow: -2px 2px 10px 0px rgba(#444, 0.4);
  }

  .section {
    padding: 2rem;
    @media screen and (min-width: 768px) {
      padding: 4rem;
    }
  }

  h1 {
    font-size: 2rem;
    margin: 0 0 1.5em;
  }

  .grid {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 150px;
    grid-auto-flow: row dense;
  }

  .item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    background: #0c9a9a;
    color: #fff;
    grid-column-start: auto;
    grid-row-start: auto;
    background: url('https://images.unsplash.com/photo-1470124182917-cc6e71b22ecc?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=');
    background-size: cover;
    background-position: center;
    box-shadow: -2px 2px 10px 0px rgba(#444, 0.4);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    &:nth-of-type(3n) {
      background-image: url('https://images.unsplash.com/photo-1422255198496-21531f12a6e8?dpr=2&auto=format&fit=crop&w=1500&h=996&q=80&cs=tinysrgb&crop=');
    }
    &:nth-of-type(4n) {
      background-image: url('https://images.unsplash.com/photo-1490914327627-9fe8d52f4d90?dpr=2&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=');
    }
    &:nth-of-type(5n) {
      background-image: url('https://images.unsplash.com/photo-1476097297040-79e9e1603142?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=');
    }
    &:nth-of-type(6n) {
      background-image: url('https://images.unsplash.com/photo-1464652149449-f3b8538144aa?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=');
    }
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.3;
      transition: opacity 0.3s ease-in-out;
    }
    &:hover {
      transform: scale(1.05);
      &:after {
        opacity: 0;
      }
    }

    &--medium {
      grid-row-end: span 2;
    }

    &--large {
      grid-row-end: span 3;
    }

    &--full {
      grid-column-end: auto;
      @media screen and (min-width: 768px) {
        grid-column: 1 / -1;
        grid-row-end: span 2;
      }
    }

    .item__details {
      position: relative;
      z-index: 1;
      padding: 15px;
      color: #444;
      background: #fff;
      text-transform: lowercase;
      letter-spacing: 1px;
      &:before {
        content: counter(item-counter);
        font-weight: bold;
        font-size: 1.1rem;
        padding-right: 0.5em;
        color: #444;
      }
    }
  }
}
</style>